<template>
    <div class="app-container">
        <header>
            <div>
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="工单统计" name="0"></el-tab-pane>
                    <el-tab-pane label="跟进记录" name="1"></el-tab-pane>
                </el-tabs>
                <el-form inline :model="formInline" class="demo-form-inline">
                    <template v-if="activeName == '0'">

                        <el-form-item label="工单日期">
                            <el-date-picker v-model="formInline.region" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.region" placeholder="活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template v-if="activeName == '1'">

                        <el-form-item label="跟进时间">
                            <el-date-picker v-model="formInline.region" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.region" placeholder="选择跟进人">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.region" placeholder="是否继续跟进">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="下次跟进时间" label-width="140px">
                            <el-date-picker v-model="formInline.region" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </template>

                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                        <el-button type="info">导出</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </header>

        <main>
            <div style="height: 633px;">
                <el-table :data="tableData" stripe border height="100%">
                    <el-table-column prop="line" label="序号" width="80" align="center" />
                    <el-table-column prop="id" label="班主任ID" width="180" align="center" />
                    <el-table-column prop="name" label="班主任名称" align="center" />
                    <el-table-column prop="totalOrder" label="工单总数" align="center" />
                    <el-table-column prop="totalPerson" label="服务学员数量（在培）" align="center" />
                    <el-table-column prop="ToDeal" label="待处理" align="center" />
                    <el-table-column prop="IsDeal" label="已完成" align="center" />
                    <el-table-column prop="IsDeal_Closed" label="已跟进关闭数" align="center" />
                    <el-table-column prop="NotIsDeal_Closed" label="未跟进关闭数" align="center" />
                    <el-table-column prop="OverTime" label="超时未跟进数" align="center" />
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer>
            <div class="pagin">
                <el-pagination background :current-page="params.page" :page-sizes="[20, 50, 100, 150]"
                    :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </footer>
    </div>
</template>

<script>
import { teacherAPI } from '@/api/adminstare'

/**
* @author        Yng
* @time          2023-11-30 09:30:33  星期四
* @description   工单统计
**/


export default {
    name: 'workCensus',
    data() {
        return {
            activeName: '0',
            formInline: {
                user: '',
                region: ''
            },
            tableData: [],
            params: {
                action: 'statList',
                ep: '',
                page: 1,
                pageSize: 20,
                sortStr: '',
            },
            total: 0
        }
    },
    mounted() {
        this.getCensus()
    },
    methods: {
        // 工单统计数据 || 跟进记录数据
        async getCensus() {
            let { code, data, total } = await teacherAPI(this.params)
            if (!code) {
                this.tableData = data
                this.total = total
            }
        },
        
        // 一页几条数据
        handleSizeChange(val) {
            this.params.pageSize = val
            this.getCensus()
        },
        // 当前页
        handleCurrentChange(val) {
            this.params.page = val
            this.getCensus()
        },
    },
    watch: {
        // tabs
        activeName(newVal) {
            newVal == '0' ? this.params.action = 'statList' : this.params.action = 'orderIsDealList'
            this.getCensus()
        }
    }
}
</script>

<style lang="scss" scoped></style>